<template>
  <div class="brand-display">
    <ul class="brand-logo">
      <li
        v-for="(item, index) of brandList"
        :key="index"
        @click="selectItem(item, index)"
      >
        <img :src="item?.brandLogo" alt="" />
      </li>
    </ul>

    <div class="ewm-box" v-if="brandEwm">
      <img :src="brandEwm" alt="" />
      <p>{{ brandDetail.brandName }}二维码</p>
    </div>

    <div v-if="isShowDetail" class="display-content">
      <div class="item">
        <div class="item-title">
          品牌名：<span>{{ brandDetail.brandName }}</span>
        </div>
      </div>

      <div class="item">
        <div class="item-title">一级品类：</div>
        <div
          class="category-item"
          v-for="(item, index) of categoryList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>

      <div class="item">
        <div class="item-title">二级品类：</div>
        <div
          class="category-two-item"
          v-for="(item, index) of twoCategoryList"
          :key="index"
        >
          {{ item.dictLabel }}:
          <span
            class="two-item"
            v-for="(sItem, inx) of item.sysDictDataVoList"
            :key="inx"
            >{{ sItem.dictLabel }}</span
          >
        </div>
      </div>
      <div class="item">
        <div class="item-title">主营品类：</div>
        <div class="category-item">
          <span>{{ mainPush }}</span>
          <span></span>
        </div>
      </div>

      <div class="item">
        <div class="item-title">代理渠道：</div>
        <div class="item-content">
          <div class="brand-collapse">
            <div v-for="item of oneAgency" :key="item.dictLabel">
              <p class="collapse-title">{{ item.dictLabel }}</p>
              <div
                v-for="(sItem, index) of item.children"
                :key="index"
                class="second-box"
              >
                <div>
                  {{ sItem.dictLabel }}:
                  <span
                    v-for="(part, inx) of sItem.children"
                    :key="inx"
                    class="city-item"
                  >
                    {{ part.dictLabel }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="item-title">门店渠道：</div>
        <div class="item-content">
          <div class="brand-collapse">
            <div v-for="item of oneStore" :key="item.dictLabel">
              <p class="collapse-title">{{ item.dictLabel }}</p>
              <div
                v-for="(sItem, index) of item.children"
                :key="index"
                class="second-box"
              >
                <div>
                  {{ sItem.dictLabel }}:
                  <span
                    v-for="(part, inx) of sItem.children"
                    :key="inx"
                    class="city-item"
                  >
                    {{ part.dictLabel }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <span class="item-title">品牌介绍：</span>
        <span class="item-content">{{ brandDetail.brandDetails }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="BrandDisplay">
import { computed, ref, watch } from "vue";
import { getWeChatQrCode } from "./fetchData";
import { dictListAll } from "@/api/dict";

const props = defineProps({
  brandInfoVoList: {
    type: Array,
    default: () => []
  },
  companyType: {
    type: String,
    default: ""
  }
});
const flag = ref(-1);
const brandList = computed(
  () => (props.brandInfoVoList as Record<string, any>[]) || []
);
const brandDetail = ref<Record<string, any>>({});
const isShowDetail = computed(() => JSON.stringify(brandDetail.value) !== "{}");
const brandEwm = ref("");
const categoryData = ref<Record<string, any>[]>([]);
const categoryList = ref<string[]>([]);
const twoCategoryList = ref<Record<string, any>[]>([]);
const storeChannels = ref<Record<string, any>[]>([]);
const oneStore = ref<Record<string, any>[]>([]);
const agencyChannels = ref<Record<string, any>[]>([]);
const oneAgency = ref<Record<string, any>[]>([]);
const mainPush = ref("");
const agencyNames = ref<string[]>([]);
const storeNames = ref<string[]>([]);

function selectItem(item: Record<string, any>, index: number) {
  flag.value = index;
  categoryList.value = [];
  twoCategoryList.value = [];
  brandDetail.value = item;
  agencyNames.value = [];
  storeNames.value = [];

  brandDetail.value = item;
  getBranQr(brandDetail.value.id);

  const customCategoryVo = item.customCategoryVo || [];
  const categoryOne = customCategoryVo.categoryOne
    ? customCategoryVo.categoryOne.split(",")
    : [];
  const arr = categoryData.value.filter((item: any) =>
    categoryOne.includes(item.dictValue)
  );
  categoryList.value = arr.map((item: any) => item.dictLabel);
  twoCategoryList.value = arr;
  mainPush.value =
    arr.find((sItem: any) => sItem.dictValue === customCategoryVo.mainPush)
      ?.dictLabel || "";

  const channelsInfoVo = item.channelsInfoVo || {};

  // 一级代理渠道
  oneAgency.value = [];
  const agencyChannelsOne = channelsInfoVo.agencyChannelsOne
    ? channelsInfoVo.agencyChannelsOne.split(",")
    : [];
  oneAgency.value = agencyChannels.value.filter((item: any) =>
    agencyChannelsOne.includes(item.dictValue)
  );
  // 二级代理渠道
  const agencyChannelsTwo = channelsInfoVo.agencyChannelsTwo
    ? channelsInfoVo.agencyChannelsTwo.split(",")
    : [];
  // // 三级代理渠道
  const agencyChannelsThree = channelsInfoVo.agencyChannelsThree
    ? channelsInfoVo.agencyChannelsThree.split(",")
    : [];
  oneAgency.value.forEach((item: any) => {
    const a = item.sysDictDataVoList.filter((sItem: any) =>
      agencyChannelsTwo.includes(sItem.dictValue)
    );
    item.children = a || [];

    item.children.forEach((sItem: any) => {
      const a = sItem.sysDictDataVoList.filter((part: any) =>
        agencyChannelsThree.includes(part.dictValue)
      );
      sItem.children = a;
    });
  });

  // 一级门店渠道
  oneStore.value = [];
  const storeChannelsOne = channelsInfoVo.storeChannelsOne
    ? channelsInfoVo.storeChannelsOne.split(",")
    : [];
  oneStore.value = storeChannels.value.filter((item: any) =>
    storeChannelsOne.includes(item.dictValue)
  );
  // 二级门店渠道
  const storeChannelsTwo = channelsInfoVo.storeChannelsTwo
    ? channelsInfoVo.storeChannelsTwo.split(",")
    : [];
  // // 三级门店渠道
  const storeChannelsThree = channelsInfoVo.storeChannelsThree
    ? channelsInfoVo.storeChannelsThree.split(",")
    : [];
  oneStore.value.forEach((item: any) => {
    const a = item.sysDictDataVoList.filter((sItem: any) =>
      storeChannelsTwo.includes(sItem.dictValue)
    );
    item.children = a || [];

    item.children.forEach((sItem: any) => {
      const a = sItem.sysDictDataVoList.filter((part: any) =>
        storeChannelsThree.includes(part.dictValue)
      );
      sItem.children = a;
    });
  });
}

function getBranQr(id: string) {
  brandEwm.value = null;
  getWeChatQrCode(id).then((res: any) => {
    brandEwm.value = "data:image/png;base64," + res.data;
  });
}

watch(
  () => props.companyType,
  (val: string) => {
    if (val === "1") {
      // 日化品牌品类
      dictListAll("daily_category").then(res => {
        categoryData.value = res.data || [];
      });
    }
    if (val === "2") {
      // 专业品牌品类
      dictListAll("major_category").then(res => {
        categoryData.value = res.data || [];
      });
    }

    dictListAll("store_channels").then(res => {
      storeChannels.value = res.data || [];
    });

    dictListAll("agency_channels").then(res => {
      agencyChannels.value = res.data || [];
    });
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.brand-display {
  .brand-logo {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 4.4rem;
      height: 4.4rem;
      margin-right: 1rem;
      margin-bottom: 1rem;

      img {
        border-radius: 1rem;
        object-fit: contain;
      }
    }
  }

  .ewm-box {
    display: flex;
    align-items: center;
    margin-bottom: 1.4rem;

    img {
      width: 4rem;
      height: 4rem;
      margin-right: 1rem;
      border-radius: 2rem;
      object-fit: contain;
    }

    p {
      flex: 1;
    }
  }

  .display-content {
    .item {
      margin-bottom: 1.2rem;

      &:last-child {
        margin-bottom: 0;
      }

      .item-title {
        margin-bottom: 0.4rem;
        color: #000;
        font-weight: 700;

        span {
          font-weight: 500;
        }
      }

      .item-content {
        line-height: 1.6rem;
        color: #2e3244;
      }

      .category-item {
        display: inline-block;
        margin-right: 0.8rem;
        text-indent: 2em;
        color: #2e3244;
      }

      .category-two-item {
        text-indent: 2em;
        line-height: 1.8rem;

        .two-item {
          margin-right: 0.8rem;
        }
      }

      .brand-collapse {
        padding-left: 1rem;

        .collapse-title {
          margin-bottom: 0.3rem;
          font-weight: 700;
          color: #000;
        }
      }

      .second-box {
        margin-bottom: 0.4rem;
        text-indent: 2em;
        color: #2e3244;

        .city-item {
          margin-right: 0.3rem;
        }
      }
    }
  }
}
</style>
